<template>
  <div class="app-container">
    <el-button type="primary" v-for="btn in btns" @click="handlerClick(btn)" :key="btn.txt" :icon="btn.ui"
      >{{btn.txt}}</el-button
    >
    <el-table
      :data="tree"
      style="width: 100%; margin-bottom: 20px"
      v-loading="listLoading"
      element-loading-text="Loading"
      row-key="node.id"
      highlight-current-row
      default-expand-all
      @row-click="handleSelectionChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="node.id" label="主键"></el-table-column>
      <el-table-column prop="node.name" label="角色名称"></el-table-column>
      <el-table-column prop="node.description" label="描述"></el-table-column>
      <el-table-column prop="node.version" label="版本"></el-table-column>
      <el-table-column prop="node.sort" label="排序"></el-table-column>
      <el-table-column
        prop="node.createTime"
        label="创建时间"
      ></el-table-column>
      <el-table-column prop="node.createUser" label="创建人"></el-table-column>
      <el-table-column
        prop="node.updateTime"
        label="修改时间"
      ></el-table-column>
      <el-table-column prop="node.updateUser" label="修改人"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { role } from '@/api/role'
import { destory } from '@/api/users'
@Component({
  name: 'role'
})
export default class extends Vue {
  private tree: any = []
  private listLoading = true
  private listQuery = {
    page: 1,
    limit: 20
  }
  private selectRow: any
  handleSelectionChange(val: any) {
    this.selectRow = val;
    console.log(val);
  }
  private btns=this.$router.currentRoute.meta.btns;

  created() {
    //console.log('route',this.$router.currentRoute);
    this.getList()
  }
 
 private btn_add(){
   this.edrow();
 }
  private btn_delete() {
    if (this.selectRow) {
      this.$confirm('删除将不可恢复，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const {data} =await destory({tableName:'sys_role',ids:this.selectRow.node.id})
          this.getList();
        })
        .catch(() => {})
    } else {
      this.$alert('请选择要操作的项！')
    }
  }

 private async edrow(id: any = '') {
   var pid='';
   if(this.selectRow) pid=this.selectRow.node.id||'';
    var pms = { tableName: 'sys_role', id: id,pid: pid}
    this.$router.push({
      path: '/sys/edrow',
      query: pms
    })
  }
 private handlerClick(btn:any){
   var self:any=this;
   if(btn.click){
     if(!self[btn.click]){
       this.$alert('没有定义"'+btn.click+'"方法');
       return;
     }
     self[btn.click]();
   }
   
 }
  private modrole() {
    if (this.selectRow == null) {
      this.$alert('请选择要操作的项！')
      return
    }
    this.$router.push({
      path: '/sys/role2menu',
      query: {
        id: this.selectRow.node.id
      }
    })
  }

  private async getList() {
    this.listLoading = true
    const { data } = await role(this.listQuery)
    this.tree = data
    // Just to simulate the time of the request
    setTimeout(() => {
      this.listLoading = false
    }, 0.3 * 1000)
  }
}
</script>
